<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="保养标题" prop="maintenanceTitle">
            <el-input v-model="ruleForm.maintenanceTitle" />
        </el-form-item>
        <el-form-item label="车牌号" prop="maintenanceBrand">
            <el-input v-model="ruleForm.maintenanceBrand" />
        </el-form-item>
        <el-form-item label="保养金额" prop="maintenancePrice">
            <el-input v-model="ruleForm.maintenancePrice" />
        </el-form-item>
        <el-form-item label="保养负责人" prop="maintenanceName">
            <el-input v-model="ruleForm.maintenanceName" />
        </el-form-item>
        <el-form-item label="当前里程数" prop="maintenanceMileage">
            <el-input v-model="ruleForm.maintenanceMileage" />
        </el-form-item>
        <el-form-item label="上次保养日期" prop="maintenanceSTime">
            <el-date-picker v-model="ruleForm.maintenanceSTime" type="date" placeholder="Pick a Date" format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="上次保养里程数" prop="maintenanceSMileage">
            <el-input v-model="ruleForm.maintenanceSMileage" />
        </el-form-item>
        <el-form-item label="当前保养日期" prop="maintenanceTime">
                <el-date-picker v-model="ruleForm.maintenanceTime" type="date" placeholder="Pick a Date" format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label=" 保养项目" prop="maintenanceProject">
            <el-input v-model="ruleForm.maintenanceProject" />
        </el-form-item>
        <el-form-item label="备   注" prop="maintenanceRemark">
            <el-input v-model="ruleForm.maintenanceRemark" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                修改
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'




const ruleForm = reactive({
    maintenanceseId: route.query.id,
    "maintenanceTitle": "",
    "maintenanceBrand": "",
    "maintenancePrice": "",
    "maintenanceName": "",
    "maintenanceMileage": "",
    "maintenanceSTime": "",
    "maintenanceSMileage": "",
    "maintenanceTime": "",
    "maintenanceProject": "",
    "maintenanceRemark": "",
    "firmId": "",
    "userId": "",
    "createName": "",
    "createDate": ""
})

const GetMaintenancese = () => {
    axios.get("/ReadMaintent/api/Repairs/GetMaintenanceseId?id=" + route.query.id)
        .then(res => {
            ruleForm.maintenanceseId = route.query.id,
                ruleForm.maintenanceTitle = res.data.data.maintenanceTitle,
                ruleForm.maintenanceBrand = res.data.data.maintenanceBrand,
                ruleForm.maintenancePrice = res.data.data.maintenancePrice,
                ruleForm.maintenanceName = res.data.data.maintenanceName,
                ruleForm.maintenanceMileage = res.data.data.maintenanceMileage,
                ruleForm.maintenanceSTime = res.data.data.maintenanceSTime,
                ruleForm.maintenanceSMileage = res.data.data.maintenanceSMileage,
                ruleForm.maintenanceTime = res.data.data.maintenanceTime,
                ruleForm.maintenanceProject = res.data.data.maintenanceProject,
                ruleForm.maintenanceRemark = res.data.data.maintenanceRemark,
                ruleForm.firmId = res.data.data.firmId,
                ruleForm.userId = res.data.data.userId,
                ruleForm.createName = res.data.data.createName,
                ruleForm.createDate = res.data.data.createDate

        })
}




const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    maintenanceTitle: [
        { required: true, message: '保养标题不能为空', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    maintenanceBrand: [
        { required: true, message: '车牌号不能为空', trigger: 'change', },
    ],
    maintenancePrice: [
        { required: true, message: '保养金额不能为空', trigger: 'change', },
    ],
    maintenanceName: [
        { required: true, message: '保养负责人不能为空', trigger: 'change', },
    ],
    maintenanceMileage: [
        { required: true, message: '保养当前里程数不能为空', trigger: 'change', },
    ],
    maintenanceSTime: [
        { required: true, message: '保养上次保养日期不能为空', trigger: 'change', },
    ],
    maintenanceSMileage: [
        { required: true, message: '保养上次保养里程数不能为空', trigger: 'change', },
    ],
    maintenanceTime: [
        { required: true, message: '保养当前保养日期不能为空', trigger: 'change', },
    ],
    maintenanceProject: [
        { required: true, message: '保养保养项目不能为空', trigger: 'change', },
    ],
    maintenanceRemark: [
        { required: true, message: '备注不能为空', trigger: 'change', },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post("/Maintent/api/Maintenancese/UpdateMaintenancese", ruleForm)
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success("修改成功")
                        router.push({
                            name: "MaintenanceseShow"
                        })
                    }
                    else {
                        ElMessage.error("修改失败")
                    }
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    GetMaintenancese()
})

</script>